virtual DOM 与 diff 算法入门介绍

发表于

随着前端框架的流行，Vue 和 React 被越来越多的公司和团队使用，大家今天就跟着我一起来看看 virtual DOM 作为 Vue 和 React 的核心，它到底是什么，为什么会存在 virtual DOM，以及它是如何使用的，最后给大家简单介绍一些 diff 算法的实现。下面我们开始吧~
通过今天的介绍，我们将了解以下三部分的内容，也希望大家看后有所收获~

  1. virtual DOM 是什么，为什么会存在 virtual DOM ？

  2. virtual DOM 如何应用，有哪些核心的 API ？

  3. 简单介绍一下 diff 算法。

virtual DOM 是什么，为什么会存在 virtual DOM？

  • 用 JS 模拟 DOM 结构（不是真正的DOM）；
  • DOM 结构的变化，放在 JS 层来实现；
  • 提高重绘性能；

简单总结一下，由于在浏览器端频繁操作 DOM 是非常耗性能的事情，为了避免这种情况，我们会使用 JS 来模拟 DOM 结构，同时，DOM 结构的变化也同样放在 JS 层操作（JS 是图灵完备语言），这就是为什么会存在 virtual DOM 的原因。
既然 DOM 结构需要用 JS 来进行模拟，那我们下面就举一个具体的例子看看究竟是如何进行模拟的呢？

1
2
3
4
<ul id='list'>
  <li class='item'>item 1</li>
  <li class='item'>item 2</li>
</ul>

上述是一个简单的列表结构，如果要将它用进行 JS 模拟，便是下面的结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  tag: 'ul',
  attrs: {
    id: 'list'
  },
  children: [{
    tag: 'li',
    attrs: {className: 'item'},
    children: ['item 1']
  }, {
    tag: 'li',
    attrs: {className: 'item'},
    children: ['item 2']
  }]
}

很明显，下面的对象包含了上述列表结构的全部信息，标签、属性、子节点等等，这样我们就完成了 virtual DOM 的初始工作，那么 virtual DOM 到底是怎么实现的呢，不急，我们先去看看在没有它出现之前，用 jQuery 是怎样实现的~

DEMO

需求：将下面的数据展示成表格，随便修改一个表格，表格也跟着修改；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
  {
    name: '张三',
    age: '20',
    address: '北京'
  },
  {
    name: '李四',
    age: '21',
    address: '上海'
  },
  {
    name: '王五',
    age: '22',
    address: '广州'
  }
]

实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <button id="btn-change">change</button>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
    <script type="text/javascript">
        // 数据源
        var data = [
            {
                name: '张三',
                age: '20',
                address: '北京'
            },
            {
                name: '李四',
                age: '21',
                address: '上海'
            },
            {
                name: '王五',
                age: '22',
                address: '广州'
            }
        ]
        // 渲染函数
        function render(data) {
            // 外层容器
            var $container = $('#container');
            // 清空容器
            $container.html('');
            // 拼接 table
            var $table = $('<table>');
            $table.append($('<tr><td>name</td><td>age</td><td>address</td>/tr>'));
            data.forEach(function (item) {
                $table.append($('<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.address + '</td>/tr>'))
            });
            // 渲染到页面（注意顺序问题）
            $container.append($table);
        }

        // 改变数据
        $('#btn-change').click(function () {
            data[1].age = 30
            data[2].address = '深圳'
            // re-render 再次渲染
            render(data);
        });

        // 页面加载完立刻执行（初次渲染）
        render(data);
    </script>
</body>
</html>

上面的代码实现逻辑比较清晰，也并不复杂，简单来说就是初次渲染，如果数据有改动，那么更新数据再次渲染，相信大家看完代码也都足够清楚。
做了足够的铺垫，下面正式的主人公要登场了，我们接着去解决上面提出的第二个问题，virtual DOM 如何应用，有哪些核心的 API ？

virtual DOM 如何应用，有哪些核心的 API ？

下面给大家介绍 snabbdom（ https://github.com/snabbdom/snabbdom ）github 上面关于 virtual DOM 的第三方开源库并不是很多，这也侧面反应了其实它的实现过程还是相对复杂的，之所以挑选了 snabbdom，也是因为 Vue 2.0 的 virtual DOM 就是在它的基础上实现的。

上面这张图是 github 上面 snabbdom 的官方示例，重复出现的函数我已经标红了，不难猜测，h 函数和 patch 函数也正是 snabbdom 的核心函数。
我们仿照官方示例，试图改写刚才的 DEMO，随后去浏览器中查看 DOM 元素的变化，看看是否与我们预期的相一致。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <button id="btn-change">change</button>

    <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-class.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-props.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-style.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-eventlisteners.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.0/h.js"></script>
    <script type="text/javascript">
        var snabbdom = window.snabbdom
        // 定义关键函数 patch
        var patch = snabbdom.init([
            snabbdom_class,
            snabbdom_props,
            snabbdom_style,
            snabbdom_eventlisteners
        ])

        // 定义关键函数 h
        var h = snabbdom.h

        // 原始数据
        var data = [
            {
                name: '张三',
                age: '20',
                address: '北京'
            },
            {
                name: '李四',
                age: '21',
                address: '上海'
            },
            {
                name: '王五',
                age: '22',
                address: '广州'
            }
        ]
        // 把表头也放在 data 中
        data.unshift({
            name: '姓名',
            age: '年龄',
            address: '地址'
        })

        var container = document.getElementById('container')

        // 渲染函数
        var vnode
        function render(data) {
            var newVnode = h('table', {}, data.map(function (item) {
                var tds = []
                var i
                for (i in item) {
                    if (item.hasOwnProperty(i)) {
                        tds.push(h('td', {}, item[i] + ''))
                    }
                }
                return h('tr', {}, tds)
            }))

            if (vnode) {
                // re-render
                patch(vnode, newVnode)
            } else {
                // 初次渲染
                patch(container, newVnode)
            }
            // 存储当前的 vnode 结果
            vnode = newVnode
        }
        // 初次渲染
        render(data)

        var btnChange = document.getElementById('btn-change')
        btnChange.addEventListener('click', function () {
            data[1].age = 30
            data[2].address = '深圳'
            // re-render
            render(data)
        })
    </script>
</body>
</html>

上面的实现过程基本与 jQuery 的相类似，只不过引用了 snabbdom 中的函数，大家可以去浏览器中观察 DOM 的变化，看看与之前的有什么不同，不同的地方也恰恰就是 virtual DOM 存在的原因。
讲了 virtual DOM 是什么，也初步体验了 virtual DOM 的实现过程，接下来，我们继续去了解 virtual DOM 中的核心算法 —— diff 算法。

简单介绍一下 diff 算法；

想提前说一点注意，diff 算法我在这里去繁就简，因为 diff 算法非常之复杂，源码量也非常之大，所以我们在这里只做最核心流程的介绍，不去关心具体的细节，如果有感兴趣的同学可以自己抽时间去研究更加深入的 diff 算法的实现。

通过上面 snabbdom 的了解，我们不难看出，patch 函数实际就是在实现 diff 算法，那么我们就抓住核心，去研究一下 patch 函数是如何实现的，也就了解了 diff 算法。

  • patch(container, vnode);
  • patch(vnode, newVnode);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// patch(container, vnode);
function createElement(vnode) {
    var tag = vnode.tag  // 'ul'
    var attrs = vnode.attrs || {}
    var children = vnode.children || []
    if (!tag) {
        return null
    }

    // 创建真实的 DOM 元素
    var elem = document.createElement(tag)
    // 属性
    var attrName
    for (attrName in attrs) {
        if (attrs.hasOwnProperty(attrName)) {
            // 给 elem 添加属性
            elem.setAttribute(attrName, attrs[attrName])
        }
    }
    // 子元素
    children.forEach(function (childVnode) {
        // 给 elem 添加子元素
        elem.appendChild(createElement(childVnode))  // 递归
    })

    // 返回真实的 DOM 元素
    return elem
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// patch(vnode, newVnode);
function updateChildren(vnode, newVnode) {
    var children = vnode.children || []
    var newChildren = newVnode.children || []

    children.forEach(function (childVnode, index) {
        var newChildVnode = newChildren[index]
        if (childVnode.tag === newChildVnode.tag) {
            // 深层次对比，递归
            updateChildren(childVnode, newChildVnode)
        } else {
            // 替换
            replaceNode(childVnode, newChildVnode)
        }
    })
}

function replaceNode(vnode, newVnode) {
    var elem = vnode.elem  // 真实的 DOM 节点
    var newElem = createElement(newVnode)

    // 替换
}

上面的 createElement、updateChildren 仅仅是对 DOM 元素做了最简单的对比，就像本节开始提醒到的，我们现在在了解的阶段，无需去关注细节，把握大体实现流程即可。本文没有涉及到的内容，比如节点的新增和删除、节点的重新排序、节点的样式、属性、事件绑定等内容，如果有兴趣的同学可以自己下来慢慢研究。

以上就是 virtual DOM 与 diff 算法入门介绍的全部内容了，我们从为什么会有 virtual DOM 入手，介绍了它是什么以及如何应用，同时介绍了最核心的 diff 算法，希望对大家有所帮助。